import React, { Component, createElement } from 'react';
import { Comment, Tooltip, Avatar } from 'antd';
import moment from 'moment';
import { Link } from "react-router-dom";

import { DislikeOutlined, LikeOutlined, DislikeFilled, LikeFilled } from '@ant-design/icons';
export default class Follow extends Component {
    constructor(props){
        super(props)
        this.state={
            likes:0,
            dislikes:0,
            action:null
        }
    }
     like = () => {
         this.setState({
             likes:1,
             dislikes:0,
             action:'liked'
         })
        
    };

     dislike = () => {
         this.setState({
             likes: 0,
             dislikes: 1,
             action: 'disliked'
         })
    };
    render() {
       let action = this.state.action
        let likes = this.state.likes
        let dislikes = this.state.dislikes

        const actions = [
            <span key="comment-basic-like">
                <Tooltip title="Like">
                    {createElement(action === 'liked' ? LikeFilled : LikeOutlined, {
                        onClick: this.like,
                    })}
                </Tooltip>
                <span className="comment-action">{likes}</span>
            </span>,
           
            <span key="comment-basic-reply-to"><Link to='reply'>查看5条回复></Link></span>,
            <div style={{ width: '76vw', backgroundColor: '#F5F5F9',marginTop:'10px',borderRadius:'1vw' }}><div style={{marginLeft:'1.2vw'}}>xxx（作者）：错<span role='img' aria-label='aria-label'>👍</span></div></div>
            
        ];
        return (
           <div>
                <Comment
                    actions={actions}
                    author={<a>Han Solo</a>}
                    avatar={
                        <Avatar
                            src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                            alt="Han Solo"
                        />
                    }
                    content={
                        <p>
                            We supply a series of design principles, practical patterns and high quality design
                            resources (Sketch and Axure)
        </p>
                    }
                    datetime={
                        <Tooltip title={moment().format('YYYY-MM-DD HH:mm:ss')}>
                            <span>{moment().fromNow()}</span>
                        </Tooltip>
                    }
                />
           
           </div>
        );
    }
}
